<template>
  <div class="ma-content-block lg:flex justify-between p-4">
    <!-- CRUD 组件 -->
    <ma-crud :options="options" :columns="columns" ref="crudRef">
      <template #operationBeforeExtend="{ record }">
        <a-link @click="openApi(record)">接口</a-link>
        <a-link @click="openChannel(record)" :auth="['logistics:supplierChannel:index']" >渠道</a-link>
      </template>
    </ma-crud>
    <a-modal :visible="apiVisible" @cancel="apiVisible = false" :on-before-ok="submit" @ok="apiVisible = false"
             unmount-on-close>
      <ma-form v-model="apiForm" :columns="apiColumns" :options="apiOptions" ref="maFormRef">
          
      </ma-form>
    </a-modal>
    <Channel ref="channel" />
  </div>
</template>
<script setup>
import {ref, reactive, nextTick} from 'vue'
import supplier from '@/api/logistics/supplier'
import {Message} from '@arco-design/web-vue'
import Channel from './supplierChannel.vue'
const crudRef = ref()
const channel = ref()


const options = reactive({
  id: 'supplier',
  pageLayout: 'fixed',
  rowSelection: {
    showCheckedAll: true
  },
  pk: 'id',
  operationColumn: true,
  operationColumnWidth: 160,
  formOption: {
    viewType: 'modal',
    width: 600
  },
  api: supplier.getList,
  recycleApi: supplier.getRecycleList,
  add: {
    show: true,
    api: supplier.save,
    auth: ['logistics:supplier:save']
  },
  edit: {
    show: true,
    api: supplier.update,
    auth: ['logistics:supplier:update']
  },
  delete: {
    show: true,
    api: supplier.deletes,
    auth: ['logistics:supplier:delete'],
    realApi: supplier.realDeletes,
    realAuth: ['logistics:supplier:realDeletes']
  },
  recovery: {
    show: true,
    api: supplier.recoverys,
    auth: ['logistics:supplier:recovery']
  }
})

const columns = reactive([
  {
    title: "主键",
    dataIndex: "id",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    commonRules: {
      required: true,
      message: "请输入主键"
    }
  },
  {
    title: "公司名称",
    dataIndex: "name",
    formType: "input",
    search: true,
    commonRules: {
      required: true,
      message: "请输入公司名称"
    }
  },
  {
    title: "公司名称(英)",
    dataIndex: "name_en",
    formType: "input"
  },
  {
    title: "状态",
    dataIndex: "status",
    formType: "radio",
    search: true,
    addDefaultValue: 1,
    commonRules: {
      required: true,
      message: "请输入状态"
    },
    dict: {
      data: [
        {value: 1, label: '启用'},
        {value: 0, label: '禁用'}
      ],
      translation: true,
    }
  },
  {
    title: "类型",
    dataIndex: "type",
    formType: "checkbox",
    searchFormType: 'select',
    search: true,
    commonRules: {
      required: true,
      message: "请输入类型"
    },
    dict: {
      name: "supplierType",
      props: {
        label: "title",
        value: "key"
      },
      translation: true
    }
  },
  // {
  //   title: "接口",
  //   dataIndex: "api_type",
  //   formType: "input"
  // },
  {
    title: "联系人",
    dataIndex: "contact",
    formType: "input"
  },
  {
    title: "联系电话",
    dataIndex: "phone",
    formType: "input"
  },
  {
    title: "创建者",
    dataIndex: "created_by",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "更新者",
    dataIndex: "updated_by",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "创建时间",
    dataIndex: "created_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  },
  {
    title: "更新时间",
    dataIndex: "updated_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  },
  {
    title: "删除时间",
    dataIndex: "deleted_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  },
  {
    title: "备注",
    dataIndex: "remark",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  }
])

const apiVisible = ref(false)
const apiForm = ref({})
const maFormRef = ref()
const apiRecordId = ref(null)
const apiOptions = ref({
  showButtons: false
})

const renderForm = function (value) {
  if(apiColumns.value.length > 1){
    apiColumns.value = apiColumns.value.slice(0, 1)
  }
  ('undefined' != typeof value) && (apiForm.value.api_type = value)
  maFormRef.value.getColumnService().getDictService('api_type').getRawDictData().map(i => {
    if (i.value == apiForm.value.api_type) {
      i.data.fields.map(f => {
        apiColumns.value.push({title: f.name, dataIndex: f.key,tooltip:f.explain});
      })
    }
  })
}

const apiColumns = ref([
  {
    dataIndex: 'api_type', title: '类型', formType: 'select',
    dict: {
      url: 'logistics/supplier/api-list',
      props: {label: 'name', value: 'name'},
      afterLoadData: () => renderForm()
    },
    onChange: (value) => {
      renderForm(value)
    }
  }
])

const submit = async () => {
  if (await maFormRef.value.validateForm()) {
    return false
  }
  const formData = maFormRef.value.getFormData()
  let response = await supplier.saveApi(apiRecordId.value, formData)
  if (response.success) {
    Message.success(response.message || `成功！`)
    return true
  } else if (response.success === false && (typeof response.code === "undefined" || response.code !== 200)) {
    Message.clear()
    Message.error(response.message || `失败！`)
    return false
  }
}
const openChannel = (record)=>{
  channel.value.open(record.id)
}
const openApi = (record) => {
  apiRecordId.value = record.id
  supplier.readApi(apiRecordId.value).then((res) => {
    apiForm.value = {}
    for (var i in res.data.apiParams){
      apiForm.value[i] = res.data.apiParams[i]
    }
    apiForm.value.api_type = res.data.api_type
    apiVisible.value = true
  })
}
</script>
<script> export default {name: 'logistics:supplier'} </script>